<template>
  <div class="prog_bar">
    <!-- 时间条 -->
    <div class="prog_box">
      <span>{{ $store.state.progress | formatMinSed }}</span>
      <van-slider
        :max="parseInt($store.state.duration / 1000)"
        v-model="$store.state.progress"
        @change="audio_progress"
        @drag-start="drag_start"
        @drag-end="drag_end"
        active-color="#ee0a24"
        bar-height="4px"
      />
      <span>{{ ($store.state.duration / 1000) | formatMinSed }}</span>
    </div>
    <!-- 播放条 -->
    <div class="play_box">
      <i @click.stop="prev_song" class="iconfont icon-shangyishou"></i>
      <i
        @click="play"
        class="iconfont"
        :class="$store.state.playing ? 'icon-zanting' : 'icon-shipin'"
      ></i>
      <i @click.stop="next_song" class="iconfont icon-xiayishou"></i>
      <!-- 播放歌曲的列表 -->
      <div @click="showPopup" class="play_list">
        <i class="iconfont icon-bofangliebiao"></i>
      </div>
      <!-- 播放列表 -->
      <van-popup
        transition="fade"
        v-model="show"
        round
        position="bottom"
        :style="{ height: '50%' }"
      >
        <song-list
          v-for="(song, idx) in play_song_list"
          :key="song.id"
          :name="song.name"
          :singer="song.ar"
          :id="song.id"
          :duration="song.dt"
          :id_list="id_list"
          :idx="idx"
          :class="idx === $store.state.song_idx ? 'act_color' : ''"
        ></song-list>
      </van-popup>
    </div>
  </div>
</template>

<script>
import SongList from "@/components/common/SongList";
import nearNumber from "@/util/nearNumber";
import { mapState, mapMutations } from "vuex";
import { get_song_detail } from "@/api/common";
export default {
  name: "ProgressBar",
  data() {
    return {
      show: false,
      play_song_list: [], // 播放列表
    };
  },
  created() {
    // 获取播放歌曲列表
    get_song_detail(this.play_list.join(",")).then((res) => {
      this.play_song_list = res.data.songs;
    });
  },
  computed: {
    // 播放列表，当前歌曲下标，歌词/时间
    ...mapState(["play_list", "song_idx", "medisArray", "scroll_lyric"]),
    // 播放列表id
    id_list() {
      if (!this.play_song_list.length) {
        return [];
      } else {
        return this.play_song_list.map((el) => el.id);
      }
    },
  },
  components: {
    SongList,
  },
  methods: {
    // 歌词偏移，时间条拖拽状态
    ...mapMutations(["change_offset", "change_drag_status"]),
    // 播放
    play() {
      this.$audio.playStatus();
    },
    // 进度条控制音频
    audio_progress(val) {
      this.$audio.currentTime = val;
      // 匹配歌词最接近的时间
      if (this.scroll_lyric) {
        let times = this.medisArray.map((el) => el.t);
        this.change_offset(nearNumber(times, val));
      }
    },
    drag_start() {
      this.change_drag_status(true);
    },
    drag_end() {
      this.change_drag_status(false);
    },
    // 上一首
    prev_song() {
      console.log("切换上一首", this.play_list[this.song_idx - 1]);
      let new_idx;
      if (this.song_idx === 0) {
        new_idx = this.play_list.length - 1;
      } else {
        new_idx = this.song_idx - 1;
      }
      let prev_id = this.play_list[new_idx];
      this.$store.commit("change_idx", new_idx);
      // 拿到id后进行歌曲播放，并且更新歌曲详情
      this.$audio.playSong(prev_id);
      // 改变播放页歌曲id
      if (this.play_list.length > 1) {
        this.$router.push({
          params: {
            id: prev_id,
          },
        });
      }
    },
    // 下一首
    next_song() {
      console.log("切换下一首");
      let new_idx;
      if (this.song_idx === this.play_list.length - 1) {
        new_idx = 0;
      } else {
        new_idx = this.song_idx + 1;
      }
      let next_id = this.play_list[new_idx];
      this.$store.commit("change_idx", new_idx);
      // 拿到id后进行歌曲播放，并且更新歌曲详情
      this.$audio.playSong(next_id);
      if (this.play_list.length > 1) {
        this.$router.push({
          params: {
            id: next_id,
          },
        });
      }
    },
    // 显示播放列表
    showPopup() {
      this.show = true;
    },
  },
  filters: {
    // 格式为分:秒
    formatMinSed(val) {
      if (!val) {
        val = 0;
      }
      let minute = parseInt(val / 60)
        .toString()
        .padStart(2, 0);
      let second = parseInt(val % 60)
        .toString()
        .padStart(2, 0);
      return minute + ":" + second;
    },
  },
};
</script>

<style lang="scss" scoped>
.prog_bar {
  .prog_box {
    display: flex;
    align-items: center;
    span {
      margin: 0 15px;
    }
  }
  .play_box {
    position: relative;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 36px;
      &:nth-child(2) {
        font-size: 44px;
        margin: 0 20px;
      }
    }
    .play_list {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      line-height: 40px;
      i {
        font-size: 28px;
      }
    }
  }
}
.van-popup {
  color: #000;
  padding: 10px 20px;
}
.van-popup--bottom.van-popup--round {
  border-radius: 20px;
}
.van-popup--bottom {
  width: 90%;
  left: 5%;
  bottom: 12%;
}
/* 进场时刻 和 离场完成时，不透明度都为 0 */
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
/* 为进场过程和离场过程设置 transition 过渡属性 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.act_color {
  color: #d43c33;
}
</style>
